<template>
  <view class='startForm'>
    <!-- 校验图标 -->
    <view
      class="jiaoyan"
      v-show="showError"
    >
      <nut-icon
        class="jiaoyan_icon"
        name="failure"
        color="#eb5b56"
      ></nut-icon>
      <view class="jiaoyan_text">{{error.jiaoyan}}</view>
    </view>
    <view class="content">
      <!--  -->
      <view class="Item">
        <nut-cell
          class="el-form-item__label xin"
          title="学号"
          :desc="info.code"
        >
          <template v-slot:icon>
            <img
              class="nut-icon"
              :src="icon.img"
            />
          </template>
        </nut-cell>
        <nut-cell
          class="el-form-item__label xin"
          title="姓名"
          :desc="info.name"
        >
          <template v-slot:icon>
            <img
              class="nut-icon"
              :src="icon.img2"
            />
          </template>
        </nut-cell>
        <nut-cell
          class="el-form-item__label xin"
          title="院系"
          :desc="info.yuanxi"
        >
          <template v-slot:icon>
            <img
              class="nut-icon"
              :src="icon.img3"
            />
          </template>
        </nut-cell>
        <nut-cell
          class="el-form-item__label xin"
          title="专业"
          :desc="info.zhuanye"
        >
          <template v-slot:icon>
            <img
              class="nut-icon"
              :src="icon.img4"
            />
          </template>
        </nut-cell>
      </view>
      <!-- 第二部分 -->
      <view class="Item">
        <nut-cell
          title="班导师"
          :class="xinminValue=='请选择 >'?'':'selectColor'"
          :desc="xinminValue"
          @click="xinminPicker"
          :error-message="error.bandaoshi"
          error-message-align='right'
        >
          <template v-slot:icon>
            <img
              class="nut-icon"
              :src="icon.img5"
            />
          </template>
        </nut-cell>
        <nut-picker
          v-model:visible="xinminShow"
          :columns="xinminColumns"
          @change="xinminChange"
          @confirm="dxinminConfirm"
          @close="xinminClose"
        ></nut-picker>

        <nut-cell
          title="导师"
          :desc="xinminValue2"
          :class="xinminValue2=='请选择 >'?'':'selectColor'"
          @click="xinminPicker2"
          :error-message="error.daoshi"
          error-message-align='right'
        >
          <template v-slot:icon>
            <img
              class="nut-icon"
              :src="icon.img6"
            />
          </template>
        </nut-cell>
        <nut-picker
          v-model:visible="xinminShow2"
          :columns="xinminColumns2"
          @change="xinminChange"
          @confirm="dxinminConfirm2"
          @close="xinminClose"
        ></nut-picker>
      </view>
      <!-- 第三部分 -->
      <view class="Item">
        <nut-form>
          <nut-input
            v-model='info.number'
            label="校园卡号"
            class="nut-input-text"
            placeholder="请输入"
            required
            type="text"
            input-align="right"
            @blur='blurNumber'
            :error-message="error.number"
            error-message-align='right'
          />

          <nut-input
            v-model='info.phone'
            label="手机号"
            class="nut-input-text"
            placeholder="请输入"
            required
            type="text"
            input-align="right"
            @blur='blurPhone'
            :error-message="error.phone"
            error-message-align='right'
          />

          <nut-cell
          :class="xinminValue3=='请选择 >'?'':'selectColor'"
            title="离院类型"
            :desc="xinminValue3"
            @click="xinminPicker3"
          >
            <template v-slot:icon>
              <img
                class="nut-icon nut-icon7"
                :src="icon.img7"
              />
            </template>
          </nut-cell>
          <nut-picker
            v-model:visible="xinminShow3"
            :columns="xinminColumns3"
            @change="xinminChange"
            @confirm="dxinminConfirm3"
            @close="xinminClose"
          ></nut-picker>
        </nut-form>
      </view>
      <!-- 按钮 -->
      <view class="btn_box">
        <nut-button
          class="btn"
          shape="square"
          type="info"
          @click="clickCommit"
        >提交</nut-button>
        <nut-button
          class="btn"
          shape="square"
          type="default"
          @tap="cancel"
        >取消</nut-button>
      </view>

    </view>
    <!-- 按钮 -->

  </view>
</template>
<script>
import './liyuanshenqing.less'
import Taro, { useRouter, getCurrentInstance } from '@tarojs/taro'
export default {
  data() {
    return {
      //学生信息
      info: {
        code: '20220205',
        name: "刘德华",
        yuanxi: '城市规划系',
        zhuanye: '计算机',
        number: '',
        phone: ''
      },
      //错误提示
      error: {
        number: '',
        phone: '',
        jiaoyan: ''
      },
      showError: false,
      //为true就可以提交
      bandaoshi: false,
      daoshi: false,
      number: false,
      phone: false,
      liyuan: false,
      //选择框1
      xinminValue: '请选择 >',
      xinminShow: false,
      xinminColumns: [ //选择框1
        { text: '张老师', value: '张老师' },
        { text: '张老师2', value: '张老师2' },
      ],
      //选择框2
      xinminShow2: false,
      xinminValue2: '请选择 >',
      xinminColumns2: [
        { text: '缪老师', value: '缪老师' },
        { text: '缪老师2', value: '缪老师2' },
      ],
      //选择框3
      xinminShow3: false,
      xinminValue3: '请选择 >',
      xinminColumns3: [
        { text: 'aaa', value: 'aaa' },
        { text: 'bbb', value: 'bbb' },
        { text: '其它', value: '其它' },
      ],
      icon: {
        img: require('@/static/login/studentNumber.png'),
        img2: require('@/static/login/usernameIcon.png'),
        img3: require('@/static/index/icon_yuanxi.png'),
        img4: require('@/static/index/icon_zhuanye.png'),
        img5: require('@/static/index/icon_daoshi.png'),
        img6: require('@/static/index/icon_daoshi2.png'),
        img7: require('@/static/index/icon_leixing.png'),
      }

    }
  },
  methods: {
    //点击选择框
    xinminPicker() {
      this.xinminShow = true
    },
    xinminPicker2() {
      this.xinminShow2 = true
    },
    xinminPicker3() {
      this.xinminShow3 = true
    },
    //选项发生改变时触发
    xinminChange() {

    },
    //点击取消按钮时触发
    xinminClose() {

    },
    //点击确定按钮时触发
    dxinminConfirm({ selectedValue, selectedOptions }) {
      console.log(selectedValue, selectedValue, "========");
      this.xinminValue = selectedValue[0]
      this.bandaoshi = true
    },
    dxinminConfirm2({ selectedValue, selectedOptions }) {
      this.xinminValue2 = selectedValue[0]
      this.daoshi = true
    },
    dxinminConfirm3({ selectedValue, selectedOptions }) {
      this.xinminValue3 = selectedValue[0]
      this.liyuan = true
    },
    //输入框失焦
    blurNumber(val) {
      console.log('失焦', val);
      var value = val.replace(/\s/g, "");//去除空格
      if (value == '') {
        this.error.number = '卡号不能为空'
        this.number = false
        return
      } else {
        this.info.number = value
        this.error.number = ''
        this.number = true
      }
    },
    blurPhone(val) {
      console.log('失焦2', val);
      var value = val.replace(/\s/g, "");//去除空格
      let regs = /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/;
      if (val == '') {
        this.error.phone = '手机号不能为空'
        this.phone = false
        return
      } else if (!regs.test(value)) {
        this.error.phone = '请输入正确的号码'
        this.phone = false
        return
      } else {
        this.info.phone = value
        this.error.phone = ''
        this.phone = true
      }

    },
    //提交按钮
    clickCommit() {
      if (!this.bandaoshi && !this.daoshi && !this.number && !this.phone && !this.liyuan) {
        Taro.showToast({ title: '请填写', icon: 'error' })
        return false
      }
      if (!this.bandaoshi) {
        this.showError = true
        this.error.jiaoyan = '班导师不能为空'
        setTimeout(() => {
          this.showError = false
        }, 1000)
      } else if (!this.daoshi) {
        this.showError = true
        this.error.jiaoyan = '导师不能为空'
        setTimeout(() => {
          this.showError = false
        }, 1000)
      } else if (!this.number) {
        this.showError = true
        if (this.info.number == '') {
          this.error.jiaoyan = '卡号不能为空'
        } else {
          this.error.jiaoyan = '请输入正确的卡号'
        }
        setTimeout(() => {
          this.showError = false
        }, 1000)
      } else if (!this.phone) {
        this.showError = true
        if (this.info.phone == '') {
          this.error.jiaoyan = '手机号不能为空'
        } else {
          this.error.jiaoyan = '请输入正确的手机号'
        }

        setTimeout(() => {
          this.showError = false
        }, 1000)
      } else if (!this.liyuan) {
        this.showError = true
        this.error.jiaoyan = '离院类型不能为空'
        setTimeout(() => {
          this.showError = false
        }, 1000)
      } else {
        Taro.showToast({ title: '提交成功', icon: 'success' })

      }
    },
    // 取消按钮
    cancel() {
      Taro.redirectTo({
        url: '../../pages/index/index'
      })
      return
    }

  }
}
</script>
<style>
</style>